<!--
 * @Author: 谢子健 1075010289@qq.com
 * @Date: 2024-09-18 12:36:18
 * @LastEditors: 谢子健 1075010289@qq.com
 * @LastEditTime: 2024-09-29 20:23:16
 * @FilePath: \ilink-vue-frontend\src\views\Square\LearningSquare\Lesson\video\components\SpeechSummary.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useFileTransStore } from '@/stores/fileTransStore'; // 引入 Pinia store
import { storeToRefs } from 'pinia';
import { computed, onMounted, ref, watch } from 'vue';

// 获取 fileTransStore
const fileTransStore = useFileTransStore();
const { summarization } = storeToRefs(fileTransStore);

// 响应式数据用于显示发言人及其总结内容
const conversationalSummary = ref<{ SpeakerName: string; Summary: string } | null>(null);
const speakerName = computed(() => conversationalSummary.value?.SpeakerName || '未知发言人');
const summaryText = computed(() => conversationalSummary.value?.Summary || '暂无总结内容');

// 更新发言人及其总结内容
const updateConversationalSummary = () => {
  conversationalSummary.value = summarization.value?.ConversationalSummary?.[0] || null;
};

// 监听 summarization 的变化
watch(summarization, () => {
  updateConversationalSummary(); // 更新 conversationalSummary
}, { immediate: true });

// 初始化时获取数据
onMounted(() => {
  updateConversationalSummary(); // 确保组件挂载时初次获取数据
});
</script>

<template>
  <div class="container">
    <div class="avatarContainer">
      <img src="@/assets/729.png" alt="avatar" class="avatar">
      <span class="username">{{ speakerName }}</span>
    </div>
    <div class="summaryContent">
      <p class="text">
        {{ summaryText }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background-color: #f6f5fd; /* 背景底色 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.avatarContainer {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.summaryContent {
  flex: 1;
  text-align: left; /* 确保文字靠左对齐 */
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #3f3f3f;
  margin-bottom: 10px;
}

.text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-top: 0px;
}
</style>
